<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>%VITE_APP_TITLE%</title>
</head>
<body>
<div id="app">
    <!-- 加载动画样式 -->
    <style>
        .app-loading {
            display: flex;
            width: 100%;
            height: 100vh; /* 全屏高度 */
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background: #f0f2f5;
            margin: 0; /* 清除默认margin */
        }

        .app-loading-wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            display: flex;
            transform: translate3d(-50%, -50%, 0);
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .app-loading-title {
            margin-bottom: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .app-loading-logo {
            width: 100px;
            margin: 0 auto 15px auto;
        }

        .app-loading-item {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 60px;
            vertical-align: middle;
            border-radius: 50%;
        }

        .app-loading-outter {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 4px solid #2d8cf0;
            border-bottom: 0;
            border-left-color: transparent;
            border-radius: 50%;
            animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
        }

        .app-loading-inner {
            position: absolute;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            width: 40px;
            height: 40px;
            border: 4px solid #87bdff;
            border-right: 0;
            border-top-color: transparent;
            border-radius: 50%;
            animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
        }

        @keyframes loader-outter {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes loader-inner {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }
    </style>

    <!-- 加载动画DOM -->
    <div class="app-loading">
        <div class="app-loading-wrap">
            <img src="/logo.gif" class="app-loading-logo" alt="Logo" />
            <div class="app-loading-title">%VITE_APP_TITLE%</div>
            <div class="app-loading-item">
                <div class="app-loading-outter"></div>
                <div class="app-loading-inner"></div>
            </div>
        </div>
    </div>
</div>

<!-- 主应用入口 -->
<script type="module" src="/src/main.ts"></script>

<!-- H5 SDK 埋点脚本 -->
<script src="/h5-sdk.js"></script> <!-- 修正路径：移除多余的"./"，适配Vite静态资源路径 -->
<script type="text/javascript">
    // 初始化埋点队列
    (function(w, d, s, q, i) {
        w[q] = w[q] || [];
        let f = d.getElementsByTagName(s)[0], j = d.createElement(s);
        j.async = true;
        j.id = 'beacon-aplus';
        j.src = '/h5-sdk.js'; // 确保路径正确（与上方引入一致）
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'aplus_queue');

    // 配置埋点参数
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['appKey', 'A-330100000000-0315']
    });
    aplus_queue.push({
        action: 'aplus.setMetaInfo',
        arguments: ['aplus-rhost-v', 'quickaplus-api.hzos.hzs.zj']
    });

    // 发送PV埋点
    console.log('页面加载埋点执行开始');
    aplus_queue.push({
        action: 'aplus.sendPV',
        arguments: [{ is_auto: false }, {}]
    });
    console.log('页面加载埋点执行结束');
</script>
</body>
</html>